<template>
  <el-dialog title="编辑"  :close-on-click-modal="false" :visible.sync="show" class="dialog_index dialog_banner dialog_fileType_add"
   :before-close="cancle">
   <el-form ref="form" v-loading="loading" class="support_fileType_form scroll">
      <el-tabs type="card" v-model="activeName">
        <el-tab-pane :label="item.site" :name="item.site" v-for="item  in formList" :key="item.id">
          <el-form-item label="文件类型：" >
            <el-input  :placeholder="'文件类型('+item.site+')（必填项)'" v-model="item.file_type"></el-input>
          </el-form-item>
          <el-form-item label="图片：" class="imageUpload">
            <el-upload class="uploadImage" :action="actionUrl" 
            :on-success="(response, file, fileList) => handleSuccess(response, file, fileList, item)"
              :on-error="handleError" :before-upload="beforeUpload"
            :show-file-list="false" accept=".png" :data="{type:'file_type', imageheight: imgH, imagewidth: imgW}" >
              <br><el-button size="small" type="primary" @click.stop="closeDrawerDialog">图库选择</el-button> 
              <el-button slot="trigger" size="small" type="primary">本地上传</el-button>
            </el-upload>
            <el-image :src="utils.setCdnUrl()+item.image" v-show="item.image"></el-image>
            <p class="upload__tip">只能上传.png 格式的图片，大小≤600k，必填项；</p>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
     
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="search" :loading="isSubmit" @click="submitForm">保存</el-button>
      <el-button @click="cancle">取消</el-button>
    </span>
    <Drawer v-show="showDrawer" :type="'file_type'" :show="showDrawer"  @closeDialog="closeDrawerDialog"></Drawer>

   </el-dialog>
</template>

<script>
import { editGet, editPost } from '@/api/support/fileType.js'
import Drawer  from '@/components/Gallery/index.vue' 
export default {
  data () {
    return {
      formList:[],
      loading: false,
      activeName: '',
      isSubmit : false,
      image: '',
      showDrawer: false,
      actionUrl: "/api/api/general/upload",
      imgW: '',
      imgH: '',
    }
  },
  props: {
    show: Boolean,
    closeDialog:Function,
    id: String,
  },
  components: { Drawer },
  watch: {
    show:function(){
      if(this.show){
        this.loading = true
        this.isSubmit = false
        this.getData()
      }
    }
  },

  methods: {
        // 图库选择是否显示
    closeDrawerDialog (data) {
      this.showDrawer = !this.showDrawer
      if(data && data.filePathNameHttp )  { 
        for(let i =0; i< this.formList.length; i++){
          this.formList[i].image = data.filePathName
        }
        
      }
    },
    handleSuccess(response){
      for(let i =0; i< this.formList.length; i++){
        this.formList[i].image = response.data.filePathName
      }
      this.$message.success('上传图片成功')   
    },
    handleError(){
      this.$message.error('上传图片失败')   
    },
    beforeUpload(file){
      let that = this
      const isLt2M = file.size / 1024  <=  600;
      if(!isLt2M){
        this.$message.error("上传图片大小不超过600k")
        return false
      }
      if( file.type !== 'image/png' ){
        this.$message.error("仅支持.png格式的图片")
        return false
      }
      const isSize = new Promise(function(resolve, reject){
        let _URL = window.URL || window.webkitURL;
        let img = new Image();
        img.onload = function() {
          let valid = img.width ==  img.height ;
          valid ? resolve() : reject();
          that.imgW = img.width
          that.imgH = img.height
        }
        img.src = _URL.createObjectURL(file);
      }).then(()=>{

        return file
      }, ()=>{
        // that.$message.error('上传图标为正方形')
        return file
      })
      return isSize
    },
    getData (){
      let params = {
        support_id: this.id
      }
      editGet(params).then(res => {
        if (res.status == 200) {
          let data = res.data
          for(let i = 0; i < data.length; i++  ) {
            if (i == 0 ){
              this.activeName = data[i].site
            }
          }

          this.formList= data
          this.loading = false
        }
      })
    },
    submitForm () {
      let status = this.validateForm()
      if(status && !this.isSubmit){
        this.postData()
      }
    },
    postData () {
      let list = this.formList
      let params = {
        data: JSON.stringify(list) 
      }
      this.isSubmit = true
      editPost(params).then(res => {
        if(res.state == 1){
          this.$message.success('保存成功')   
          this.cancle()
        }
        this.isSubmit = false
      })
    },
    validateForm () {
      let list = this.formList

      let status = true
      for ( let i = 0; i < list.length; i++ ){
        if (list[i].image === '') {
          this.$message.error('站点' + list[i].site + '图片为必填项')
          status = false
          break
        }
        if (list[i].file_type === '') {
          this.$message.error('站点' + list[i].site + '文件类型为必填项')
          status = false
          break
        }
        if (list[i].file_type.length >= 60) {
          this.$message.error('站点' + list[i].site + '文件类型不可超过 60 字符；')
          status = false
          break
        }
      }
      return status
    },
    
    cancle(){
      this.$refs.form.resetFields(); // 清空原来的数据
      this.$emit('closeDialog')
    },
  },
 
}
</script>

<style lang="scss">

</style>